<template>
  <div class="innerContainer">
    <common-title text="项目管理">
      <template #expand>
        <el-button type="primary" @click="onAdd">新增</el-button>
      </template>
    </common-title>
    <div class="innerPane">
      <div class="filterArea">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item label="项目名称">
            <el-input @keyup.enter="onSearch" v-model="searchForm.name" placeholder="请输入产品名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button plain type="primary" @click="search">查询</el-button>
            <el-button plain @click="onClear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-row :gutter="12">
        <el-col v-for="(item, idx) in tableData" :key="idx" :xs="24" :sm="12" :md="8" :lg="6">
          <el-card shadow="hover" class="data-card">
            <!-- 卡片内容 -->
            <div class="card-body">
              <el-row class="card-line" style="width: 100%;">
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple">
                    <span class="label">项目名称：</span>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div class="grid-content ep-bg-purple">
                    <span class="value">{{ item.projectName }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="card-line" style="width: 100%;">
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple">
                    <span class="label">测组数量：</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple-light">
                    <span class="value">{{ item.groupCount }}</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple">
                    <span class="label">测点数量：</span>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple-light">

                    <span class="value">{{ item.pointCount }}</span>
                  </div>
                </el-col>
              </el-row>
              <div class="card-line">
                <!-- 这里放图片 URL -->
                <el-image :src="item.ext?.img" :preview-src-list="[item.ext?.img]" fit="contain"
                  style="width: 100%; height: 220px; border-radius: 4px" lazy>
                  <!-- 占位 / 加载失败 兜底 -->
                  <template #placeholder>
                    <div class="image-slot">加载中…</div>
                  </template>
                  <template #error>
                    <div class="image-slot">暂无图片</div>
                  </template>
                </el-image>
              </div>
            </div>

            <!-- 操作区 -->
            <template #footer>
              <div class="card-footer"> 
                <el-button type="primary" link @click="onEdit(item)">
                  编辑
                </el-button>
                <el-button type="primary" link @click="handleScreen(item)">
                  大屏
                </el-button>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <project-view ref="projectViewRef" @confirm="onSearch" />

  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

import ProjectView from "./projectView.vue";

import {
  projectList,
} from "../../utils/requests";


const router = useRouter();

// Dom 挂载之后
onMounted(async () => {
  onSearch();
});



// 用户数据
let tableData = ref([]);

let total = ref(0);
// 搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
  projectName: '',
  projectLevel: 1,
});

const onClear = () => {
  searchForm.projectName = "";

  onSearch();
};

const onSearch = () => {
  projectList(searchForm).then((res) => {
    tableData.value = res;
    total.value = res.total;
  });
};

const onDel = (rowData) => {
  ElMessageBox.confirm("确定要删除该设备信息吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await delProduct({ ids: rowData.id });

      ElMessage.success("删除成功");
      searchForm.current = 1;
      search();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const projectViewRef = ref(null);
const onAdd = () => {
  projectViewRef.value.openDialog(null);
};

const onEdit = (rowData) => {
  router.push({
    name: "projectEdit",
    query: {
      projectId: rowData.id,
    },
  });
};

const handleScreen =(rowData)=>{
  
   window.open('/screen/#/home?projectId=' + rowData.id, '_blank')
}

</script>

<style scoped>
.filterArea {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.filterArea .el-select {
  width: 120px;
}

.card-line {
  display: flex;
  flex-wrap: wrap;
}

.data-card {
  margin-bottom: 12px;
}

.card-body {
  line-height: 1.8;
}

.label {
  color: #909399;
  margin-right: 8px;
  /* 固定 60 px */
  text-align: right;
}

.card-footer {
  text-align: right;
}

.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 12px;
  margin: 10px 0 10px 0;
}
</style>
